<template>
  <!--工作台问题反馈组件-->
  <div class="problem_feedback">
    <el-dialog
      title="问题反馈"
      :visible.sync="dialogVisible"
      v-dialogDrag
      :close-on-click-modal="false"
      customClass="mes_dialog"
      @closed="closed">
      <div class="feed_back_info">
        <p>周转码：<span>{{turnoverNumber}}</span></p>
        <p>发起工序：<span>{{workstageName}}</span></p>
        <p>工序进度：<span>{{workstageProcessStatus}}</span></p>
      </div>
      <div class="feed_back_content">
        <el-form
          v-if="dialogVisible"
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm">
          <el-form-item label="" prop="description">
            <el-input
              type="textarea"
              placeholder="请输入问题反馈描述"
              rows="7"
              resize="none"
              v-model.trim="ruleForm.description"
              maxlength="255"></el-input>
            <span class="text_length">{{ruleForm.description ? ruleForm.description.length : 0}}/255</span>
          </el-form-item>
          <div class="selects">
            <el-form-item class="problem_types" label="问题类型：" prop="problemTypeId">
              <el-select v-model="ruleForm.problemTypeId" size="small" placeholder="请选择" value="">
                <el-option
                  v-for="item in problemTypes"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="handler_id" label="提交至：" prop="handlerId">
              <el-select v-model="ruleForm.handlerId" size="small" placeholder="请选择" value="">
                <el-option
                  v-for="item in handlers"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <span slot="footer" class="mes_btn">
        <el-button type="primary" @click="handleSubmit">提 交</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ProblemFeedback',
  data() {
    return {
      dialogVisible: false,
      turnoverWstageId: '', // 周转批次工序ID,
      workcenterId: '', // 工作中心ID,
      turnoverId: '', // 周转批次ID,
      workstageId: '', // 工单工序ID,
      turnoverNumber: '', // 周转码
      workstageName: '', // 发起工序
      workstageProcessStatus: '', // 工序进度
      ruleForm: {
        description: '', // 问题描述
        problemTypeId: '', //问题类型ID
        handlerId: '', //处理人ID
      },
      rules: {
        problemTypeId: [
          {required: true, message: '请选择问题类型', trigger: 'change'}
        ],
        handlerId: [
          {required: true, message: '请选择提交至', trigger: 'change'}
        ],
        description: [
          {max: 255, message: '问题反馈描述不能超过255个字符', trigger: 'blur'}
        ]
      },
      saveState: true, // 提交请求可用状态
    }
  },
  computed: {
    problemTypes() {
      return this.$store.state.dict.workstageProblemType.labels || []
    },
    handlers() {
      return this.$store.state.workshopBench.handlers
    }
  },
  methods: {
    /**
     * 显示弹窗并接收传值
     */
    openDialog(data) {
      this.initData(data)
      this.getHandlers()
      this.dialogVisible = true
    },
    initData(data) {
      this.turnoverWstageId = data.id
      this.workcenterId = data.workcenterId
      this.turnoverId = data.turnoverId
      this.workstageId = data.workstageId
      this.turnoverNumber = data.turnoverNumber
      this.workstageName = data.workstageName
      this.workstageProcessStatus = data.workstageProcessStatusLabel
      this.ruleForm = {
        description: '', // 问题描述
        problemTypeId: '', //问题类型ID
        handlerId: data.technologistId, //处理人ID
      }
    },
    // 获取提交人
    getHandlers() {
      let commitObj = {
        method: 'get',
        url: 'a/workstageproblemprocess/workstageProblemProcess/listtechnologist',
        module: 'workshopBench',
        state: 'handlers'
      }
      this.$store.dispatch('saveData', commitObj)
    },
    handleSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.submitProblemType()
        }
      })
    },
    submitProblemType() {
      let commitObj = {
        method: 'post',
        url: 'a/workstageproblemprocess/workstageProblemProcess/createProblemProcess',
        data: {
          turnoverWstageId: this.turnoverWstageId, // 周转批次工序ID,
          workcenterId: this.workcenterId, // 工作中心ID,
          turnoverId: this.turnoverId, // 周转批次ID,
          workstageId: this.workstageId, // 工单工序ID,
          description: this.ruleForm.description, // 问题描述
          problemTypeId: this.ruleForm.problemTypeId, //问题类型ID
          handlerId: this.ruleForm.handlerId, //处理人ID
        },
        noCommit: true
      }
      if (!this.saveState) return
      this.saveState = false
      this.$store.dispatch('saveData', commitObj).then(() => {
        this.dialogVisible = false
        this.tipMessage('success', '提交成功')
        this.$emit('submitSuccess')
      }).finally(() => {
        this.saveState = true
      })
    },
    // 弹窗关闭
    closed() {
      this.saveState = true
    },
    /**
     * 提示
     * @param type 提示类型
     * @param str 提示内容
     */
    tipMessage(type, str) {
      this.$message({
        type: type,
        message: str,
        duration: 1500,
        center: true
      })
    }
  }
}
</script>

<style lang="less">
  .problem_feedback {
    .mes_dialog {
      width: 600px;
    }

    .feed_back_content {
      padding: 20px;

      .el-textarea {
        position: relative;
        border: 1px solid #dbe1e8;
        padding-bottom: 20px;
        border-radius: 2px;

        .el-textarea__inner,
        .el-form-item.is-success .el-textarea__inner {
          border: none !important;
        }
      }

      .text_length {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 20px;
        line-height: 20px;
        text-align: right;
        padding-right: 5px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        color: #7e8e9f;
        font-size: 12px;
      }

      .selects {
        display: flex;

        .el-form-item__content {
          width: 322px !important;
        }

        .el-select {
          width: 160px;
        }

        .problem_types, .handler_id {
          margin-bottom: 0;
        }
      }
    }

    .feed_back_info {
      display: flex;
      align-items: center;
      justify-content: space-around;
      box-sizing: border-box;
      background-color: #ebf0f6;
      height: 40px;
      line-height: 40px;
    }

    .el-dialog__body {
      padding: 0 !important;
    }

    .el-form-item.is-success .el-textarea__inner, .el-form-item.is-success .el-textarea__inner:focus {
      border: none !important;
    }
  }
</style>
